<script setup lang="ts">
import SysDialog from '@/components/SysDialog/index.vue';
import useVisitorDetail from '@/composables/custcare/visitor/useVisitorDetail';
import useDialog from '@/hooks/useDialog';

// 弹框
const { dialog, onShow, onClose } = useDialog()

const { onConfirm, show, visitor } = useVisitorDetail(dialog, onShow, onClose)

// 暴露方法给外部使用
defineExpose({
    show
})

</script>
<template>
    <SysDialog :title="dialog.title" :height="500" :visible="dialog.visible" @onClose="onClose" @onConfirm="onConfirm">
        <template v-slot:content>
            <el-row>
                <el-col :span="6" :offset="0">ip黑名单</el-col>
                <el-col :span="18" :offset="0" v-if="visitor.data.is_ip_black == 0">
                    否
                </el-col>
                <el-col :span="18" :offset="0" v-else>
                    是
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6" :offset="0">ip地址</el-col>
                <el-col :span="18" :offset="0">{{ visitor.data.client_ip }}</el-col>
            </el-row>
            <el-row>
                <el-col :span="6" :offset="0">uuid</el-col>
                <el-col :span="18" :offset="0">{{ visitor.data.uuid }}</el-col>
            </el-row>
            <el-row>
                <el-col :span="6" :offset="0">省</el-col>
                <el-col :span="18" :offset="0">{{ visitor.data.province }}</el-col>
            </el-row>
            <el-row>
                <el-col :span="6" :offset="0">城市</el-col>
                <el-col :span="18" :offset="0">{{ visitor.data.city }}</el-col>
            </el-row>
            <el-row>
                <el-col :span="6" :offset="0">浏览器</el-col>
                <el-col :span="18" :offset="0">{{ visitor.detail.browser }}</el-col>
            </el-row>
            <el-row>
                <el-col :span="6" :offset="0">来源</el-col>
                <el-col :span="18" :offset="0">{{ visitor.detail.refer }}</el-col>
            </el-row>
            <el-row>
                <el-col :span="6" :offset="0">Host</el-col>
                <el-col :span="18" :offset="0">{{ visitor.detail.host }}</el-col>
            </el-row>
            <el-row>
                <el-col :span="6" :offset="0">访问次数</el-col>
                <el-col :span="18" :offset="0">{{ visitor.detail.visits }}</el-col>
            </el-row>
            <el-row>
                <el-col :span="6" :offset="0">姓名</el-col>
                <el-col :span="18" :offset="0">{{ visitor.detail.name }}</el-col>
            </el-row>
            <el-row>
                <el-col :span="6" :offset="0">手机</el-col>
                <el-col :span="18" :offset="0">{{ visitor.detail.mobile }}</el-col>
            </el-row>
            <el-row>
                <el-col :span="6" :offset="0">email</el-col>
                <el-col :span="18" :offset="0">{{ visitor.detail.email }}</el-col>
            </el-row>
            <el-row>
                <el-col :span="6" :offset="0">qq</el-col>
                <el-col :span="18" :offset="0">{{ visitor.detail.qq }}</el-col>
            </el-row>
            <el-row>
                <el-col :span="6" :offset="0">微信</el-col>
                <el-col :span="18" :offset="0">{{ visitor.detail.wechat }}</el-col>
            </el-row>
            <el-row>
                <el-col :span="6" :offset="0">备注</el-col>
                <el-col :span="18" :offset="0">{{ visitor.detail.remark }}</el-col>
            </el-row>
        </template>
    </SysDialog>
</template>
<style lang="scss" scoped>
.el-row {
    font-size: 12px;
    line-height: 30px;
    border-bottom: 1px solid rgb(219, 218, 218);

    .el-col {
        border: 0;
        word-wrap: break-word;
    }
}
</style>
